<script setup lang="tsx">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Table, TableColumn } from '@/components/Table'
import { modifyApi } from '@/api/document'
import Location from '../component/Location.vue'
import { searchSupplierCateApi } from '@/api/utils/search'
const emit = defineEmits(['close', 'get-list'])

const props = defineProps({
  dataList: {
    type: Array,
    required: true
  }
})
// 获取第三方所属
const options = ref()
const getSearchSupplierCateApi = async () => {
  const res = await searchSupplierCateApi({ field: 'id,name,abbreviation' })
  options.value = res.data.list
}
onMounted(() => {
  getSearchSupplierCateApi()
})
const TableSchema = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index'
  },
  {
    field: 'goods.name',
    label: '产品名称'
  },
  {
    field: 'spec_name',
    label: '规格'
  },
  {
    field: 'imgList',
    label: '图片',
    width: '100px'
  },
  {
    field: 'orig_quantity',
    label: '采购时数量'
  },
  {
    field: 'quantity',
    label: '签收数量'
  },
  {
    field: 'supplier_id',
    label: '第三方所属',
    formatter: (row) => {
      const foundObj = options.value.find((item) => item.id === row.supplier_id)
      return foundObj ? foundObj.name : ''
    }
  },
  {
    field: 'purchasing_price',
    label: '单价（元）'
  },
  {
    field: 'amount',
    label: '进货总价（元）'
  },
  {
    field: 'storage_name',
    label: '选择库位',
    slots: {
      default: ({ row }) => {
        return (
          <div onClick={() => showSelectTableEl(row)} class="w-full h-full cursor-pointer">
            {row.storage_name ? row.storage_name : '点击选择库位'}
          </div>
        )
      }
    }
  }
])
// 选择库位
const showSelectTable = ref(false)
const rowList = ref()
const showSelectTableEl = (row) => {
  rowList.value = row
  showSelectTable.value = true
}

const setTableData = async (val) => {
  const res = await modifyApi({ id: rowList.value.id, warehouse_storage_id: val.id })
  if (res) {
    ElMessage.success(res.msg)
    emit('get-list')
  }
}
</script>

<template>
  <Table
    :columns="TableSchema"
    :data="props.dataList"
    :image-preview="['imgList']"
    max-height="500"
    :show-overflow-tooltip="false"
  />
  <div v-if="showSelectTable">
    <Location
      v-model="showSelectTable"
      title="选择库位"
      :rowListData="props.dataList[0].company_id"
      @change="setTableData"
    />
  </div>
</template>
